<template>
  <div class="login-wrapper">
    <figure class="aircraft-back"></figure>
    <article>
      系统介绍：
      <p>根据前机身/中后机身前段的装配需求，规划兼顾基本型/高原型飞机部段生产的柔性化产线，集成柔性工装及自动化装备，运用机器人自动定位技术，机器人自动涂胶、钻铆及辅助测量、总装对接等制造技术，实现高原型飞机部段装配的需求。</p>
    </article>
    <form>
      <legend>高原型产线数字孪生系统</legend>
      <section class="input-wrapper">
        <i>
          <Icon :name="'user-default'" />
        </i>
        <input type="text" placeholder="请输入账号" v-model="userName" />
      </section>
      <section class="input-wrapper">
        <i>
          <Icon :name="'password-default'" />
        </i>
        <input :type="passwordIsShow ? 'password' : 'text'" placeholder="请输入密码" v-model="password" />
        <i class="cursor" @click="passwordIsShow = !passwordIsShow">
          <Icon :name="'password-hide'" v-if="passwordIsShow" />
          <Icon :name="'password-display'" v-else />
        </i>
      </section>
      <!-- <section class="button-switch" @mouseover="warnWarn1IsShow = true" @mouseout="warnWarn1IsShow = false">
        <button>忘记密码？</button>
      </section> -->
      <section class="button-wrapper">
        <button type="submit" @click.prevent="jumpToHome">登录</button>
      </section>
      <!-- <section class="button-switch" @mouseover="warnWarn2IsShow = true" @mouseout="warnWarn2IsShow = false">
        <button>立即注册</button>
      </section> -->
    </form>
    <div class="warn warn1" v-show="warnWarn1IsShow">
      <figure>敬请期待</figure>
    </div>
    <div class="warn warn2" v-show="warnWarn2IsShow">
      <figure>敬请期待</figure>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import Icon from '@/components/icon/Base'
import router from '@/router'
import 'element-plus/theme-chalk/index.css'
import { ElMessage } from 'element-plus'

onMounted(() => {
  document.onkeydown = e => {
    // 回车提交表单
    if (e.key === 'Enter') {
      e.preventDefault()
      jumpToHome()
    }
  }
})

const passwordIsShow = ref(true)
const userName = ref('')
const password = ref('')
const userNameArr = ['admin']
const passwordArr = ['123456', 123456]
async function jumpToHome () {
  if (userNameArr.includes(userName.value) && passwordArr.includes(password.value)) {
    router.push({ name: 'SFTwin' })
  } else {
    ElMessage.error('账号密码有误')
  }
}

const warnWarn1IsShow = ref(false)
const warnWarn2IsShow = ref(false)
</script>
<style lang="less">
.login-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  pointer-events: none;
  user-select: none;

  display: flex;
  gap: 88px;
  align-items: center;
  pointer-events: all;
  background: url('@/assets/loginImg/back.png') no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-position-y: 60%;
  background-size: cover;
  .aircraft-back {
    background: url('@/assets/loginImg/aircraft.png') no-repeat;
    background-size: 100% 100%;
    width: 560px;
    height: 283px;
    position: absolute;
    top: 448px;
    left: 32px;
    z-index: 1;
  }
  article {
    width: 976px;
    margin-left: 56px;
    padding: 43px 51px;
    background: rgba(4, 12, 24, 0.58);
    text-indent: 32px;
    line-height: 1.8;
    font-family: Source Han Sans CN;
    font-size: 14px;
    border-radius: 5px;
    z-index: 2;
    position: relative;
  }

  form {
    box-sizing: border-box;
    background: url('@/assets/loginImg/loginBack.png') no-repeat;
    background-size: 100% 100%;
    padding: 70px 83px 0 83px;

    legend {
      text-align: center;
      font-family: YouSheBiaoTiYuan;
      font-size: 42px;
      margin-bottom: 48px;
    }

    .input-wrapper {
      display: flex;
      align-items: center;
      background: url('@/assets/loginImg/login-input1.png') no-repeat;
      background-size: 100% 100%;
      margin-bottom: 24px;

      i {
        aspect-ratio: 1/1;
        margin: 0 27px;
      }

      .cursor {
        cursor: pointer;
      }
    }

    input[type='password'],
    [type='text'] {
      user-select: all;
      outline: none;
      width: calc(100% - 152px);
      display: block;
      height: 52px;
      font-size: 16px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.7);
    }

    input:-webkit-autofill {
      transition: background-color 5000s ease-in-out 0s;
      -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    }

    .button-wrapper {
      button {
        width: 100%;
        height: 52px;
        margin-bottom: 24px;
        border: none;
        background: url('@/assets/loginImg/login-submit.png') no-repeat;
        background-size: 100% 100%;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #fff;
        background-color: transparent;
        letter-spacing: 10px;
        cursor: pointer;
      }
    }

    .button-switch {
      text-align: right;

      button {
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        margin-bottom: 32px;
      }
    }
  }

  .warn,
  warn1,
  warn2 {
    position: absolute;
    right: 99px;
    background: url('@/assets/loginImg/warn.png') no-repeat;
    background-size: 100% 100%;
    padding: 3px 13px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #cb5208;
  }

  .warn1 {
    top: 57.5%;
  }

  .warn2 {
    top: 71.5%;
  }

  input {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    caret-color: #fff;
  }

  input:focus {
    outline: none; /* 移除轮廓线 */
    border-color: transparent; /* 设置边框颜色为透明 */
  }
}
</style>
